﻿<template>
    <div class="l-rblock l-form-viewer" style="padding:8px;">
        <el-form
            :model="formData"
            :rules="rules"
            size="mini"
            labelPosition="right"
            labelWidth="80px"
            ref="form"
            >
            <div class="l-auto-window only-tabs">
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane class="l-tabs-container" :label="$t('主表信息')" name="tab0">
                        <el-row :gutter="0">
                            <div class="l-rblock">
                                <el-col v-if="lr_formLookAuth('f_parent_f_text')" :span="24" >
                                    <el-form-item 
                                        :label="$t('文本')" 
                                        prop="f_parent_f_text"
                                        > 
                                        <el-input :disabled="!lr_formEditAuth('f_parent_f_text',isReadOnly)" v-model="formData.f_parent_f_text" :placeholder="$t('请输入')" >
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_select')" :span="24" >
                                    <el-form-item 
                                        :label="$t('下拉多选1')" 
                                        prop="f_parent_f_select"
                                        > 
                                        <l-select :disabled="!lr_formEditAuth('f_parent_f_select',false || isReadOnly)"  :options="f_parent_f_selectOptions" v-model="formData.f_parent_f_select" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('1658977999109_23684')" :span="24" >
                                    <div class="l-title" >{{$t('设计子表')}}</div>
                                    <l-edit-table
                                        ref="f_children_table"
                                        addBtnText="新增一行"
                                        :isAddBtn="true && !isReadOnly"
                                        :isRemoveBtn="true && !isReadOnly"
                                        :isShowNum="true"
                                        :dataSource="f_children_data"
                                        :columns="lr_formTableAuth('f_children',f_children_columns)"
                                        @addRow="handleF_childrenAddRow"
                                        @deleteRow="handleF_childrenDeleteRow"
                                        >
                                        <template v-slot:f_text="scope" >
                                            <el-input size="mini"  :disabled="!lr_formTableEditAuth('f_children','f_text',isReadOnly)" v-model="scope.row.f_text" :placeholder="$t('请输入')" >
                                            </el-input>
                                        </template>
                                        <template v-slot:f_select="scope" >
                                            <l-select :disabled="!lr_formTableEditAuth('f_children','f_select',false || isReadOnly)"  size="mini" :options="f_children_f_selectOptions" v-model="scope.row.f_select" />
                                        </template>
                                        <template v-slot:f_layerSelect="scope" >
                                            <l-layer-select 
                                              size="mini"
                                              :disabled="!lr_formTableEditAuth('f_children','f_layerSelect',false || isReadOnly )" 
                                              :isPage="true"
                                              :height="504"
                                              :width="960"
                                              :columns="[{'label':'第0列','prop':'f_itemname','valueKey':'','width':100,'align':'left','hidden':false}]"
                                              :options="f_children_f_layerSelectOptions" 
                                              v-model="scope.row.f_layerSelect"
                                              
                                            />
                                        </template>
                                    </l-edit-table>
                                </el-col>
                            </div>
                        </el-row>
                    </el-tab-pane>

                </el-tabs>
            </div>
        </el-form>
    </div>
</template>
<script>
const api = window.$api.test.test

export default {
    props: {
        isReadOnly: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            moduleCode: 'test_test',
            activeName: 'tab0',
            formData: {
                f_parent_f_text:"", // 文本
                f_parent_f_select:"", // 下拉多选1

            },
            rules: {
                
            },
            f_children_columns:[
                {id:'f_children_F_text',prop:'f_text',label:'单行文本'},
                {id:'f_children_F_select',prop:'f_select',label:'选择'},
                {id:'f_children_F_layerSelect',prop:'f_layerSelect',label:'弹窗选择框'},
            ],
            f_children_data:[],

        };
    },
    computed: {
        f_parent_f_selectOptions(){
            const data = this.lr_DataSource('dataitemc')
            return this.lr_DataSourceOptions(data,'f_itemcode','f_itemname')
        },
        f_children_f_selectOptions(){
            const data = this.lr_DataSource('dataitemc')
            return this.lr_DataSourceOptions(data,'f_itemid','f_itemname')
        },
        f_children_f_layerSelectOptions(){
            const data = this.lr_DataSource('dataitem')
            return this.lr_DataSourceOptions(data,'f_id','f_itemname')
        },

    },
    methods: {
        handleF_childrenAddRow(){
            let point = {}
            point.f_text = ""
            point.f_select = ""
            point.f_layerSelect = ""
            this.f_children_data.push(point)
        },
        handleF_childrenDeleteRow(event){
            this.f_children_data.splice(event.index,1)
        },

        
        // 重置表单
        resetForm() {
            this.$formClear(this.$refs.form)
            this.activeName = 'tab0'
            this.f_children_data = []

        },
        // 校验表单
        async validateForm() {
            if (!await this.$formValidateWraper(this.$refs.form)) {
                return false  
            }
            if(!this.$refs.f_children_table.validate())
            {
                return false
            }

            return true
        },
        // 设置表单数据
        setForm(data) {
            this.$setFormData(this.formData,data.fParentEntity,'f_parent')
            this.f_children_data = data.fChildrenList

        },
        // 获取表单数据
        getForm() {
            const formData = {}
            formData.fParentEntity = this.$getFormData(this.formData,'f_parent')
            formData.fChildrenList = this.f_children_data
            return formData

        },

        async loadFormData({ keyValue/*,params,node*/ }) {//  keyValue 流程中相当于流程processId,params 传递参数,node 流程节点
            const data = await this.$awaitWraper(api.get(keyValue))
            if (data) {
                this.setForm(data)
                return true
            }
            else {
                return false
            }
        },

        async saveForm({ keyValue, isEdit/*,code,node*/ }) {// isEdit 是否更新数据, keyValue 流程中相当于流程processId,code 表示流程中的操作码,node 流程节点
            const postData = this.getForm()
            if (isEdit) {// 编辑
                return await this.$awaitWraper(api.update(keyValue, postData))
            }
            else {// 新增
                postData.fParentEntity.f_Id = keyValue

                return await this.$awaitWraper(api.add(postData))
            }
        },
    }
}
</script>